<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Qt, Qyoto, Visual Basic, Introduction">
<meta name="description" content="Introduction to Qyoto">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Qyoto</h1>

<p>
In this part of the Visual Basic Qyoto programming tutorial, we will introduce the Qyoto library and
create our first Qyoto programs using the Visual Basic programming language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
The purpose of this tutorial is to get you started with the Qyoto and Visual Basic. Images used in this
tutorial can be downloaded <a href="/img/gui/vbqyoto/images.zip">here</a>. I used some icons from the
tango icons pack of the Gnome project. 
</p>

<h2>About</h2>

<p>
<b class="keyword">Qyoto</b> is a library that provides binding of the Qt library to the
.NET languages like C# or Visual Basic. 
Qt is a powerful cross-platform application development framework.
Its native language is C++. Qyoto is a part of the KDE desktop environment. 
</p>

<pre>
vbnc -r:/usr/lib/cli/qyoto-4.3/qt-dotnet.dll quitbutton.vb
</pre>

<p>
The above command shows, how to compile the quitbutton example. The -r parameter of the
mono VB compiler loads the Qt assembly. It is a dynamic library. The command shows
a path to the dll library on a Ubuntu system. 
</p>


<h2>Creating a Tooltip</h2>

<p>
The first example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program displays
' a tooltip
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
    
        Me.InitUI()
        
    End Sub
    
    Private Sub InitUI()
    
        Me.Tooltip = "This is QWidget"
        
        Me.SetWindowTitle("Tooltip")
        Me.Resize(250, 150)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
Imports Qyoto
</pre>

<p>
The <b class="keyword">Imports</b> keyword imports necessary types that we will use
in the application.
</p>

<pre class="explanation">
Public Class VBQApp 
    Inherits QWidget
</pre>

<p>
The example inherits from a <b class="keyword">QWidget</b>. 
The QWidget class is the base class of all user interface objects. 
The widget is the atom of the user interface. It receives mouse, 
keyboard and other events from the window system.
</p>

<pre class="explanation">
Me.SetWindowTitle("Tooltip")
</pre>

<p>
This method call creates a title for the window. 
</p>

<pre class="explanation">
Me.Tooltip = "This is QWidget"
</pre>

<p>
We set a tooltip through the <b class="keyword">ToolTip</b> property.
</p>

<pre class="explanation">
Me.Resize(250, 150)
</pre>

<p>
Here we set the width and the height of the window. 
</p>

<pre class="explanation">
Me.Move(300, 300)
</pre>

<p>
The <b class="keyword">Move()</b> method moves the window on the
screen. 
</p>

<pre class="explanation">
Me.Show()
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
Dim qapp As New QApplication(args)
Dim app As New VBQApp
QApplication.Exec()
</pre>

<p>
These three lines set up the application. 
</p>

<br>
<img src="/img/gui/vbqyoto/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Centering a window</h2>

<p>
In the second example, we will center the window
on the screen. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program centers a window
' on the screen
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Dim WIDTH As Integer = 250
    Dim HEIGHT As Integer = 150

    Public Sub New()
    
        Me.InitUI()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim qdw As New QDesktopWidget

        Dim screenWidth As Integer = qdw.Width()
        Dim screenHeight As Integer = qdw.Height()

        Dim x As Integer = (screenWidth - WIDTH) / 2
        Dim y As Integer = (screenHeight - HEIGHT) / 2
        
        Me.SetWindowTitle("Center")
        Me.Resize(WIDTH, HEIGHT)
        Me.Move(x, y)
        Me.Show()
        
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
The Qyoto does not have a single method
to center a window.
</p>


<pre class="explanation">
Dim WIDTH As Integer = 250
Dim HEIGHT As Integer = 150
</pre>

<p>
These two constants define the width and height of the
application window.
</p>

<pre class="explanation">
Dim qdw As New QDesktopWidget
</pre>

<p>
The <b class="keyword">QDesktopWidget</b> class provides information about
the screen. 
</p>

<pre class="explanation">
Dim screenWidth As Integer = qdw.Width()
Dim screenHeight As Integer = qdw.Height()
</pre>

<p>
Here we determine the screen width and height. 
</p>

<pre class="explanation">
Dim x As Integer = (screenWidth - WIDTH) / 2
Dim y As Integer = (screenHeight - HEIGHT) / 2
</pre>

<p>
Here we calculate the x, y coordinates of the centered window. 
To center a window on the screen, we need to know the size of the
screen and the size of the window. 
</p>

<pre class="explanation">
Me.Move(x, y)
</pre>

<p>
We move the window to the computed x, y coordinates.
</p>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program creates a quit
' button. When we press the button,
' the application terminates. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QWidget

    Public Sub New()
     
        Me.SetWindowTitle("Quit button")
    
        Me.InitUI()
        
        Me.Resize(250, 150)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim quit As New QPushButton("Quit", Me)
        
        Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"))
        quit.Move(30, 30)
        
    End Sub

    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
We use the <b class="keyword">QPushButton</b>. This is a very common widget.
It is rectangular and usually shows a text label. 
</p>

<pre class="explanation">
Me.InitUI()
</pre>

<p>
We delegate the creation of the user interface to the <b class="keyword">InitUI()</b> method.
</p>

<pre class="explanation">
Dim quit As New QPushButton("Quit", Me)
</pre>

<p>
We create the button widget. The first parameter of the constructor is the label,
which the button displays. The second parameter is the parent widget of the
button. 
</p>

<pre class="explanation">
Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"))
</pre>

<p>
The <b class="keyword">clicked()</b> signal is emitted, when we
click on the button. The <b class="keyword">Connect()</b> method
connects a signal to a particular slot of an object. The first 
parameter of the method is the object, that receives the signal. 
In our case it is the application object. The second parameter is the
method, which is called. In our case it is the <b class="keyword">quit()</b>
method of the application object. The <b class="keyword">qApp</b> is a 
global reference to the application object. 
</p>


<br>
<img src="/img/gui/vbqyoto/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<hr class="btm">

<p>
This section was an introduction to the Qyoto library with the Visual Basic language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 16, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

